
<template>
 <div id="echarts">
   <div id="myChart" class="myChart"></div>
   <div id="myChart2" class="myChart"></div>
 </div>
</template>
<script type="text/javascript">
import * as echarts from 'echarts';
export default {
  name: 'Echarts',
  data () {
    return {}
  },
  methods: {
    echartsInit () {
      // 找到容器
      let myChart = echarts.init(document.getElementById('myChart'))
      // 开始渲染
      myChart.setOption({
        legend: {},
    tooltip: {},
    dataset: {
        source: [
            ['product', '2012', '2013', '2014', '2015'],
            ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],
            ['Milk Tea', 86.5, 92.1, 85.7, 83.1],
            ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]
        ]
    },
    xAxis: [
        {type: 'category', gridIndex: 0},
        {type: 'category', gridIndex: 1}
    ],
    yAxis: [
        {gridIndex: 0},
        {gridIndex: 1}
    ],
    grid: [
        {bottom: '55%'},
        {top: '55%'}
    ],
    series: [
        // These series are in the first grid.
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        {type: 'bar', seriesLayoutBy: 'row'},
        // These series are in the second grid.
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
        {type: 'bar', xAxisIndex: 1, yAxisIndex: 1}
    ]
      })
    },
    echartsInit2 () {
      let myChart = echarts.init(document.getElementById('myChart2'))
      myChart.setOption({
        title: {text: 'echarts 饼图'},
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data: [ 
              {value: 235, name: '视频广告'},
              {value: 274, name: '联盟广告'},
              {value: 310, name: '邮件营销'},
              {value: 335, name: '直接访问'},
              {value: 400, name: '搜索引擎'}
            ]
          }
        ]
      })
    }
  },
  mounted () {
    console.log(echarts)
    this.echartsInit()
    this.echartsInit2()
  }
}
</script>
<style scoped lang="less">
  .myChart{
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    float: left;
  }
  .myChart{
    width: 100%;
    height: 300px;
    margin-left: auto;
    margin-right: auto;
    float: right;
  }
</style>
